<template>
  <div>
    <wxc-mask :height="height"
              :width="width"
              duration="200"
              border-radius="20"
              :has-animation="hasAnimation"
              mask-bg-color="transparent"
              :has-overlay="true"
              :show-close="true"
              :show="maskShow"
              @wxcMaskSetHidden="maskHidden">
      <wxc-ep-slider :slider-id="sliderId"
                     :card-length='cardList.length'
                     :containerS="{width: width, height: height}"
                     :card-s="cardSize"
                     :select-index="0">
        <div v-for="(card, index) in cardList"
             v-bind:key="index"
             class="card"
             :style="{height: height, width: width}"
             :slot="`card${index}_${sliderId}`">
          <red-packet :user-red-packet="card" v-if="card._type == 'redPacket'"></red-packet>
          <popup-adv :adv="card" v-if="card._type == 'adv'" :width="width"></popup-adv>
        </div>
      </wxc-ep-slider>
    </wxc-mask>
    <wxc-loading :show="loadingShow"></wxc-loading>
  </div>
</template>
<style lang="scss">
  .card {
    /*background-color: #71ABF8;*/
    align-items: center;
    justify-content: center;
  }
</style>
<script>

import {WxcEpSlider, WxcMask, WxcLoading} from 'weex-ui'
let api = require('../include/api')
let shuffle = require('../include/shuffle')
module.exports = {
  props: {
    show:  {default: false}
  },
  components: {
    WxcEpSlider,
    WxcMask,
    WxcLoading,
    'red-packet': require('./red-packet.vue'),
    'popup-adv': require('./popup-adv.vue')
  },
  data () {
    return {
      cardList: [],
      sliderId: 'popupSlider',
      containerTop: 0,
      width: 750,
      height: 1330,
      maskShow: false,
      loadingShow: false,
      hasAnimation: true,
      cardSize: {
        spacing: 0,
        scale: 0.8
      }
    }
  },

  created () {
    this.height = weex.config.env.deviceHeight * 750 / weex.config.env.deviceWidth - 100
    this.cardSize.width = this.width
    this.cardSize.height = this.height
    this.$watch('show', () => {
      if (this.show) {
        this.detect()
      }
    })
  },
  mounted () {
    this.show && this.detect()
  },
  methods: {
    maskHidden () {
      this.maskShow = false
    },
    detect () {
      this.loadData()
    },
    loadData () {
      api.homePopup.data().done(rs => {
        let data = rs.data
        let list = []
        if (data.userRedPacketList) {
          data.userRedPacketList.forEach((p) => {
            p._type = 'redPacket'
            list.push(p)
          })
        }
        if (data.advList.length) {
          data.advList.forEach((p) => {
            p._type = 'adv'
          })
          let advList = shuffle(data.advList)
          list = list.concat(advList)
        }
        this.cardList = list
        this.maskShow = this.cardList.length > 0
      })
    }
  }
}
</script>
